<!-- 首席服务员 -->
<template>
    <div class="container">
        <template v-if="list.length">
            <div class="item" v-for="(item, index) in list" :key="index">
                <div class="left">
                    <img class="img" :src="item.filePath" />
                </div>
                <div class="right">
                  <div>{{item.name}}</div>
                  <div>{{item.duty}}</div>
                  <div>{{item.deptName}}</div>
                  <div>{{item.phone}}</div>
                  <div style="color: #0c92ff;" @click="toPage('pages/chiefServer/server/index', { deptId: item.deptId })">服务清单</div>
                  <div style="color: #0c92ff;" @click="toPage('pages/chiefServer/work/index')">工作动态</div>
                </div>
            </div>
        </template>
        <Empty v-if="!loading && !list.length"></Empty>
    </div>
  </template>
  <script>
  import Empty from "../../components/Empty.vue";
  import { getAllChiefListAPI } from "../../api/chief"
  
  export default {
    components: { Empty },
    data() {
        return {
            loading: false,
            name: "",
            list: [],
        };
    },
    onShareAppMessage() {},
    onShow() {
        this.loading = true;
        wx.showLoading({
            title: "加载中...",
        });
        getAllChiefListAPI().then((res) => {
            this.list = [...res.data];
            wx.hideLoading();
            this.loading = false;
        });
    },
    methods: {
      toPage(url, params) {
        this.$u.route({ url, params });
      },
    },
  };
  </script>
  <style scoped lang="scss">
  @import "../../assets/scss/common.scss";
  
  .container {
    min-height: 100vh;
    background-color: #fafafa;
    padding: 15px;
    box-sizing: border-box;
    // padding-top: 70px;
    .search {
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        padding: 10px 15px;
        background-color: #fff;
        margin-bottom: 15px;
        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1) !important;
        box-sizing: border-box;
        z-index: 2;
    }
    .item {
        padding: 15px 0;
        display: flex;
        border-radius: 8px;
        background-color: #fff;
        margin-bottom: 15px;
        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1) !important;
        .left {
          padding-left: 15px;
          .img {
            width: 100px;
            height: 120px;
            border-radius: 5px;
          }
        }
        .right {
          display: flex;
          flex-direction: column;
          height: 120px;
          justify-content: space-between;
          margin-left: 15px;
          font-size: 14px;
          color: #272525;
        }
    }
  }
  </style>